<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!--  确认订单界面  -->
<!DOCTYPE html>
<html>
<head>


    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="">
    <meta name="author" content="">
<title>彩妆  商城</title>
  <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="/Shopping/static/css/bootstrap.min.css"  type="text/css">
	<link rel="stylesheet" href="/Shopping/static/css/font-slider.css"  type="text/css">
	<!-- Custom CSS -->
    <link rel="stylesheet" href="/Shopping/static/css/style.css">
	
	
	<!-- Custom Fonts -->
    <link rel="stylesheet" href="/Shopping/static/css/font-awesome.min.css"  type="text/css">
	
	<!-- jQuery and Modernizr-->
	<script src="/Shopping/static/js/jquery-2.1.1.js"></script>
		<script src="/Shopping/static/lib/layer/2.4/layer.js"></script>
	
	<!-- Core JavaScript Files -->  	 
    <script src="/Shopping/static/js/bootstrap.min.js"></script>
</head>
<body>
	<!--Top-->
	<nav id="top">
		<div class="container">
			<div class="row">
				
				<div class="col-xs-6">
					<ul class="top-link">
						<li><a href="/Shopping/PersonInfo/personInfo"><span class="glyphicon glyphicon-user"></span> 我的账户</a></li>
						<li><a href="${prePage}"><span></span>返回</a></li>
					</ul>
				</div>
			</div>
		</div>
	</nav>
	<!--Header-->
<header class="container">
		<div class="row">
			<div class="col-md-4">
				<div id="logo">
					<font size="10" color="#cc3300" face="宋体"><i><strong>Shoopping</strong></i>
				</font></div>
			</div>
			<div class="col-md-4">
				<form class="form-search">  
					<input type="text" class="input-medium search-query">  
					<button type="button" class="btn"><span class="glyphicon glyphicon-search"></span></button>  
				</form>
			</div>
			<div class="col-md-4">
				<div id="cart"><a class="btn btn-1" href="cart.html"><span class="glyphicon glyphicon-shopping-cart"></span>购物车</a></div>
			</div>
		</div>
	</header>
	<!--Navigation-->
	<!--//////////////////////////////////////////////////-->
	<!--///////////////////Cart Page//////////////////////-->
	<!--//////////////////////////////////////////////////-->
	<div id="page-content" class="single-page">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<ul class="breadcrumb">
						<li><a href="cart.html">确认订单</a></li>
					</ul>
				</div>
			</div> 
	
			<div class="row">
				<div class="product well">
					<div class="col-md-3">
						<div class="image">
							<img src="/Shopping/static/img/${product.imgAddress}" />
						</div>
					</div>
					<div class="col-md-9">
						<div class="caption">
							<div class="name"><h3><a href="/Shopping/Product/product?productName="+productName  id="productName">${product.productName}</a></h3></div>
							<div class="info">	
								<ul>
									<li>${product.info}</li>
									<li></li>
								</ul>
							</div>
							<div class="price" id="price">￥${product.price}</span></div>
							<label>购买数量: </label> <input class="form-inline quantity" type="text" value="${amount}" id="amount"><a class="btn btn-2 ">更新</a>
							<hr>
							<a  class="btn btn-default pull-right"></a>
						</div>
					</div>
					<div class="clear"></div>
				</div>	
			</div>
		
		</div>
			<div class="row"  align="center">
			
					<div>
						<table>

							<h5><font size="7"  face="宋体">价格明细	</font></h5>
							<tr>
							
								<td><font size="5"  face="宋体">总价格:</font></td>
								<td><font size="5"  face="宋体" id="total1">00.00</font></td>
							
							</tr>
							<tr>
								<td><font size="5"  face="宋体">折扣:</font></td>
								<td><font size="5"  face="宋体">-----</font></td>
							</tr>
							<tr>
								<td><font size="5"  face="宋体">运费:</font></td>
								<td><font size="5"  face="宋体">00.00</font></td>
							</tr>
							<tr style="border-top: 1px solid #333">
								<td><h5><font size="5"  face="宋体">总共：</font></h5></td>
								<td ><font size="5"  face="宋体" id="total">00.00</font></td>
							</tr>
						
						</table>
						<center><a href="#" class="btn btn-1"><strong><font size="6"  face="宋体"><a id="settleAccount" class="btn btn-2 ">结算</a></font></strong></a></center>
					</div>
				
			</div>	
	</div>
	
	
</body>
</html>
<script type="text/javascript">
	$(document).ready(function(){
		updateTotal();
		init();
		settleAccount();
	});


	function settleAccount(){ //结算完成该订单
		$("#settleAccount").click(function(){
			$.ajax({
				url:"/Shopping/Checkorder/settlement",
				type:"get",
				data:{"productName":$("#productName").text(),"total":$("#total").text(),"amount":$("#amount").val()},
				dataType:"json",
				success:function(data){
					if(data.res==1){
					    layer.msg('结算成功',{icon:1,time:2000});
					
						res = true;
					}
				},
				error:function(){
					alert('余额不足');
				}
			});
			
		});
	}
	function updateTotal(){//更新总价格
		var ele  = $(".btn-2"); //所有更新按钮加上结算按钮
		$.each(ele,function(index){//给每个按钮加上点击事件
			$(this).click(function(){
				if(ele.length-1 != index){//把结算按钮排除
					var total = $("#total").text('0');
					total = parseFloat(total);
					init();	
				}
			});
		});
		//alert(ele.length);
	}
	function init(){ //给总价格初始化
		var ele = $(".caption");
		
		var total = $("#total").text();//总价格
		total = parseFloat(total);
		//alert(total);
		$.each(ele,function(index){
			var price = $(this).find(".price").text();	
			price = parseFloat(price.substr(1,price.length));
			//alert(price);
			var amount = parseInt($(this).find(".quantity").val())	;
			//alert(amount);
			total = total + (amount*price);
		});
		$("#total").text(total);
		$("#total1").text(total);
	}
</script>